<template>
	<div class="me">
		<div class="me-top" :style="bgPic">
			<div class="menu-box">
				<el-popover
										placement="top-start"
										trigger="hover"
										append-to-body>
					<div slot="reference">
						<div class="menu-icon"></div>
					</div>
					<div @click="logout" style="color: red">
					<el-icon class="el-icon-user-solid"></el-icon>
					<span>退出登录</span></div>
				</el-popover>
			</div>
		</div>
		<div class="me-warp">
			<div class="me-content">
				<div class="info">
					<img :src="user.image"/>
<!--					<button class="btn" @click="toRouter">编辑资料</button>-->
				</div>
				<div class="des">
					<h2>{{ user.name }}</h2>
					<span>青云号：{{ user.id }}</span>
					<p>长风破浪会有时,直挂云帆济沧海</p>
				</div>
				<div class="user-tag">
					<span>{{sex}}</span>
				</div>
				<div class="user-tag2">
					<span><a>{{ user.followCount }}</a>关注</span>
					<span><a>{{ user.fansCount }}</a>粉丝</span>
				</div>
				<div class="me-ab"  @click="toedit()">
					编辑资料
				</div>
			</div>
			<div class="me-tab">
				<div class="me-navbar">
					<div class="item" @click="changeTab(0)" :class="indexTab==0?'active':'' ">作品&nbsp;</div>
					<div class="item" @click="changeTab(1)" :class="indexTab==1?'active':'' ">动态&nbsp;22</div>
					<div class="item" @click="changeTab(2)" :class="indexTab==2?'active':'' ">喜欢&nbsp;33</div>
				</div>
				<div class="tab-wrap">
					<div class="tab-con" v-show="indexTab==0">
						<div class="tab-img" >
							<img src="../../../public/images/001.jpg" />
							<img src="../../../public/images/002.jpg" />
							<img src="../../../public/images/003.jpg" />>
						</div>
					</div>
					<div class="tab-con" v-show="indexTab==1">
						<div class="tab-img">
							<img src="../../../public/images/001.jpg" />
							<img src="../../../public/images/002.jpg" />
							<img src="../../../public/images/003.jpg" />
						</div>
					</div>
					<div class="tab-con" v-show="indexTab==2">
						<div class="tab-img">
							<img src="../../../public/images/004.jpg" />
							<img src="../../../public/images/005.jpg" />
							<img src="../../../public/images/006.jpg" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		name:"Me",
		data(){
			return{
				centerDialogVisible: false,
				sex: '',
				bgPic:{
					backgroundImage:'url('+require('../../../public/images/bg.jpg')+')',
					backgroundRepeat:'no-repeat',
					backgroundSize:'100% 100%'
				},
				indexTab:0,
				user:{},
				myVideo:{}
			}
		},
		mounted() {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.queryMe();
			loading.close();
			if (this.user.id===null){
				this.$message.error("登录过期！")
				this.$router.push("/tbsign")
			}
			this.queryMyVideo();
		},
		methods:{
			toedit(){
				this.$router.push("/edit")
			},
			queryMyVideo(){
				let url = 'http://localhost:8081/video/selectMyVideo'
				this.axios.get(url).then((response) => {
					if (response.data.code===1){
						// localStorage.user = JSON.stringify(response.data.data);
						this.myVideo= response.data.data;
					}else {
						this.$message.error("获取视频异常");
					}
				});
			},
			logout(){
				let url = 'http://localhost:8082/user/logout'
				this.axios.post(url).then((response) => {
					if (response.data.code===1){
						// localStorage.user = JSON.stringify(response.data.data);
						localStorage.clear();
						this.$message.success("账号退出成功！")
						this.$router.push("/tbsign")
					}else {
						this.$message.error("服务器错误");

					}
				});
			},
			queryMe(){
				let url = 'http://localhost:8082/user/me'
				this.axios.get(url).then((response) => {
					if (response.data.code===1){
						// localStorage.user = JSON.stringify(response.data.data);
						this.user= response.data.data;
						this.sex=this.user.sex===true?'♂男':'♀女';

					}else {
						this.$message.error(response.data.msg);
						this.$router.push("/tbsign")
					}
				});
			},
			changeTab(index){
				this.indexTab=index;
			},
			toRouter(){
				this.$router.push('/edit')
			}
		}
	}
</script>
<style scope>
	.me{position: relative;}
	.me-top{
		height: 160px;
		display: flex;
		justify-content:flex-end;
		padding: 20px;
	}
	.menu-box{
		width: 30px;
		height: 30px;
		border-radius:50% ;
		background: rgba(0,0,0, .3);
		display: flex;
		align-items: center;
		justify-content: center;	
	}
	.menu-icon{
		background: #ffffff;
		border-top:2px solid #ffffff;
		border-bottom:2px solid #ffffff;
		background-clip:content-box;
		width: 18px;
		height: 2px;
		padding: 5px 0;
	}
	.me-warp{
		position: absolute;
		top: 140px;
		width: 100%;
		background: #101821;
		color: #fff;
	}
	.me-content{
		padding: 0 20px;
	}
	.info{
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* padding-bottom:20px; */
	}
	.info img{
		height: 100px; width:100px;
		border-radius: 50%;
		margin-right: 20px;
	}
	.info .btn{
		height: 40px;
		padding: 0 24px;
		background-color:#393842;
		border: none;
		outline: none;
		color: #fff;
	}
	.des{
		padding:20px 0;
	}
	.des h2{
		font-size: 24px;
		font-weight: bold;
	}
	.des span{
		padding: 10px 0 15px 0;
		display: block;
	}
	.des p{
		line-height:24px;
	}
	.user-tag span{
		font-size:14px;
		color: #cccccc;
		margin-right:5px;
		background: rgba(0,0,0,.6);
		padding: 5px 8px;
	}
	.user-tag2{
		padding:20px 0;
	}
	.user-tag2 span{
		font-size: 14px;
		margin-right: 15px;
		color: #cccccc;
	}
	.user-tag2 a{
		margin-right: 5px;
		color: #fff;
	}
	.me-ab{
		background: red;
		text-align: center;
		padding: 10px 0;
		border-radius: 4px;
	}
	.me-tab{
		height: 300px;
	}
	.me-navbar{
		display: flex;
		padding: 0 20px;
		justify-content:space-between;
		align-items: center;
	}
	.me-navbar .item{
		padding: 10px 25px;
		color: #CCCCCC;
	}
	.me-navbar .active{
		border-bottom: 2px solid #ffdf0e;
		color: #FFFFFF;		
	} 
	.tab-img img{
		width: 33.3%;
	}
</style>
